<template>
  <div>
    <div class="login">
      <img src="/images/oi.png" alt="">
      <div class="postion">
        <span>管理员登录</span>
      </div>

      <form>
        <div class="switchs">

          <div class="paswd">
            <div class="paswdinfo">
              <input type="text" class="zh" placeholder="账号：" v-model="zh" autocomplete="username">
              <input type="password" name="" id="" placeholder="密码" class="mm" v-model="mm" autocomplete="current-password">
            </div>

          </div>
        </div>

        <button class="logins" type="button" @click="goto">登录</button>
        <button class="but" type="button" @click.prevent="gohome">返回首页</button>
      </form>
    </div>
  </div>
</template>

<script>
import { adminlogin } from '@/api/index.js'
export default {
  data() {
    return {
      zh: '',
      mm: ''
    }
  },
  methods: {
    //返回
    gohome() {
      this.$router.push('/home')
    },
    async goto() {
      if (this.zh.trim() == '' || this.mm.trim() == '') {
        this.$message('请输入账号或者密码')
        return
      }
      let result = await adminlogin(this.zh, this.mm)

      if (result.data.code == 200) {
        this.$message('登录成功')
        this.$router.replace('/adminmain')
      } else {
        this.$message('账号或者密码错误')
      }
    }
  }
}
</script>

<style scoped lang='less'>
.login {
  position: relative;
  height: 400px;
  width: 600px;
  margin: 100px auto;
  form {
    .switchs {
      .phonebox {
        height: 30px;
        width: 300px;

        border-radius: 2px;
        margin: 0 auto;
        font-size: 10px;

        .phones {
          height: 30px;
          display: flex;
          width: 300px;
          justify-content: space-between;
          border: 1px solid #767676;
          input {
            border: none;
          }
          .getcode {
            text-align: center;
            color: #757575;
            font-size: 14px;
            line-height: 30px;
            width: 100px;
            background: #ffffff;
            border: none;
          }
        }
        .phones2 {
          margin: 10px 0;
          height: 30px;
          width: 300px;

          border-radius: 2px;
          color: #757575;
          font-size: 14px;
          line-height: 30px;
        }
      }
      .paswd {
        .paswdinfo {
          .zh {
            height: 30px;
            width: 300px;
            border: 1px solid #767676;
            color: #757575;
            margin: 0 auto;
            line-height: 30px;
          }
          .mm {
            line-height: 30px;
            height: 30px;
            width: 300px;
            border: 1px solid #767676;
            margin: 10px auto;
            color: #757575;
          }
        }
      }
    }
    .info {
      display: block;
      width: 300px;
      margin: 30px auto;
      font-size: 12px;
      a {
        color: #9370db;
      }
    }
    .info2 {
      margin: 0 auto;
      width: 300px;
      display: block;
      color: #9370db;
    }
    .but {
      border: 1px solid #9370db;
      background: white;
      color: #9370db;
      height: 30px;
      width: 300px;
      display: block;
      margin: 10px auto;
    }
    .logins {
      display: block;
      height: 30px;
      width: 300px;
      margin: 10px auto;
      background: #9370db;
      color: #fff;
      border: none;
      font-size: 18px;
    }
  }
  img {
    display: block;
    height: 150px;
    width: 300px;
    margin: 0 auto;
    margin-bottom: 10px;
    &:hover {
      transform-style: preserve-3d;
      transform: rotateY(360deg);
      transition: all 1500ms;
      -moz-transform-style: preserve-3d;
      -moz-transform: rotateY(45deg);
      -moz-transition: all 9000ms;
    }
  }
  input {
    height: 30px;
    width: 300px;
    display: block;
    margin: auto;
    outline: medium;
  }
  .postion {
    width: 300px;
    display: flex;
    justify-content: space-between;
    margin: 5px auto;
    color: #9370db;
    span {
      width: 300px;
      display: block;
      text-align: center;
    }
  }
}
.active {
  border-bottom: 1px solid #9370db;
}
.activers {
  color: #9370db;
}
</style>